<template>
  <!-- 房价柱形图 -->
  <div id="main" style="width: 930px; height: 659px"></div>

</template>

<script>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts' // 使用echarts
export default {
  setup () {
    // 房价x轴刻度
    const xData = ref(['增城', '白云', '越秀', '天河', '清远', '其他', '南沙', '荔湾', '黄埔', '花都', '海珠', '佛山', '番禺', '从化'])
    // 房价数据
    const priceData = ref([19999, 29999, 39999, 59999, 69999, 45000, 19999, 29999, 39999, 59999, 69999, 45000, 45000, 19999])
    onMounted(() => {
      const myChart = echarts.init(document.getElementById('main'))
      const option = {
        title: {
          text: '广州房价',
          left: 417,
          textStyle: {
            // 'font-family': 'HarmonyOS Sans SC',
            // 'font-style': normal,
            'font-weight': 700,
            'font-size': 24
          }
        },
        tooltip: {},
        legend: {
          // 柱形条说明
          //   data: ['销量'],
        },
        xAxis: {
          data: xData.value
        },
        yAxis: {
          axisLabel: {
            formatter: '{value} 元/m²'
          }
        },
        series: [
          {
            type: 'bar',
            data: priceData.value,
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 12
                  }
                }
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    })
    return {
      xData,
      priceData
    }
  }
}
</script>

<style lang="less" scoped>
#main {
  width: 930px;
  height: 659px;
}
</style>
